
<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu
          :default-active="$route.path"
          style="height:100%"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="selectItem">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>入门</span>
            </template>
            <el-menu-item index="/base/hello">
              <span>Hello</span>
            </el-menu-item>
            <el-menu-item index="/base/button">
              <span>按钮</span>
            </el-menu-item>
            <el-menu-item index="/base/border">
              <span>边框</span>
            </el-menu-item>
            <el-menu-item index="/base/icon">
              <span>图标</span>
            </el-menu-item>
            <el-menu-item index="/base/layout">
              <span>布局</span>
            </el-menu-item>
            <el-menu-item index="/base/link">
              <span>链接</span>
            </el-menu-item>
            <el-menu-item index="/base/text">
              <span>文本</span>
            </el-menu-item>
            <el-menu-item index="/base/scrollBar">
              <span>滚动条</span>
            </el-menu-item>
            <el-menu-item index="/base/space">
              <span>间距</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>配置</span>
            </template>
            <el-menu-item index="/config/global">
              <span>全局配置</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>表单组件</span>
            </template>
            <el-menu-item index="/form/auto-complete">
              <span>自动补全输入框</span>
            </el-menu-item>
            <el-menu-item index="/form/validate">
              <span>自定义验证</span>
            </el-menu-item>
            <el-menu-item index="/form/checkbox">
              <span>checkbox多选框</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>选择器</span>
            </template>
            <el-menu-item index="/selector/data-picker">
              <span>日期选择器</span>
            </el-menu-item>      
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>提示类</span>
            </template>
            <el-menu-item index="/home/data">
              <span>数据统计</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>数据承载</span>
            </template>
            <el-menu-item index="/dataview/tree">
                <span>树型控件</span>
              </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
</script>
<script>
export default {
    methods:{
        selectItem(index){
            this.$router.push(index)
        }
    }
}
</script>

<style scoped>
#app {
  height:100%;
}

.layout-container-demo .el-header {
  position:relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:100%;
  right:20px;
}



</style>
